<%@ include file="template/CommonHeader.jsp" %>
<link href="/FMTOOL_WEB/resources/plugins/tables/dataTables/jquery.dataTables.css" type="text/css" rel="stylesheet" />

    <div id="wrapper">
        <%@ include file="template/LeftNavigator.jsp" %>


        <!--Body content-->
        <div id="content" class="clearfix">
            <div class="contentwrapper"><!--Content wrapper-->

                <%@ include file="template/PageHeader.jsp" %>

                <!-- Build page from here: -->
                <%@ include file="template/CommonSuccessMessage.jsp" %>
                <%@ include file="template/CommonErrorMessage.jsp" %>
                
                <div class="row-fluid">
                      
                       
                        <div class="span12">

                            <div class="box gradient">

                                <div class="title">
                                    <h4>
                                        <span>Responsibility List</span>
										<button class="btn btn-primary btn-mini nonMobile" href="#" onClick="window.location='newRoleForm.action'" style="float:right;margin-right:40px;">New Role</button>
                                    </h4>
									
                                </div>
                                <div class="content noPad clearfix">
                                    <table cellpadding="0" cellspacing="0" border="0" class="responsive dynamicTable display table table-bordered" width="100%">
                                        <thead>
                                            <tr>
                                                
                                                <th>User Name</th>
                                                <th>Role</th>
                                                <th>Make-Market</th>
												<th class="nonMobile">Edit</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        <s:iterator value="userList" id="userLst" status="indx">
						                	
						                	<tr>
							                    
							                    <td style="text-align: left;"><s:property value="userName"  /></td>
							                    <td style="text-align: left;"><s:property value="userTypeName"  /></td>
							                    <td style="text-align: left;">
							                     <s:iterator value="#userLst.responsibilityList" id="resLst">
							                       <s:property value="makeName"/> - <s:property value="marketName"/> <br/>
							                     </s:iterator>
							                    </td>
							                    <td  class="nonMobile">
							                      <div class="controls center">
														<a href="#editWindow<s:property value="#indx.count"/>" title="Edit Role" class="tip" data-toggle="modal"><span class="icon12 icomoon-icon-pencil"></span></a>
												  </div>	
												  <!-- Edit Confirmation Modal -->
												 <form style="margin: 0;display: inline;" method="post" action="editResponsibility.action" id="editForm<s:property value="#indx.count"/>">
												 <div id="editWindow<s:property value="#indx.count"/>" class="modal hide fade" style="display: none; ">
												     <div class="modal-header" style="text-align: left;padding-left: 10px;">
												       <button type="button" class="close" data-dismiss="modal"><span class="icon12 minia-icon-close"></span></button>
												       <h3>Role Edit Window</h3>
												     </div>
												     <div class="modal-body">
												             
												           <div class="form-row row-fluid">
					                                            <div class="span12">
					                                                <div class="row-fluid">
					                                                    <label class="form-label span3" for="user.userName">Name<font style="color:red">*</font></label>
					                                                    <div class="form-label span9" style="text-align: left;">
					                                                    	<s:property value='userName' />
					                                                    </div>					                                                    					
					                                               </div>
                                            			        </div>
                                        			        </div>	
                                        			        <div class="form-row row-fluid">
					                                            <div class="span12">
					                                                <div class="row-fluid">
					                                                    <label class="form-label span3" for="user.roleName">Role<font style="color:red">*</font></label>	
					                                                    <div class="form-label span9" style="text-align: left;">
					                                                    	<s:property value='userTypeName' />
					                                                    </div>						
					                                               </div>
                                            			        </div>
                                        			        </div>		
                                        			        <div class="form-row row-fluid">
					                                            <div class="span12">
					                                                <div class="row-fluid">
					                                                    <label class="form-label span3" for="role.roleName">Make<font style="color:red">*</font></label>
					                                                    <div class="form-label span9" style="text-align: left;">
						                                                	<select  name="selectedMarkets" class="nostyle" multiple="multiple" >
						                                                	     <s:iterator value="marketList"  id="marketLst">
						                                                	      
						                                                	      <% boolean marketFlag=false; %>
						                                                	        <s:iterator value="#userLst.responsibilityList" id="resLst">
																                       <s:if test="#resLst.marketId == #marketLst.marketId"> 
																                          <% marketFlag=true; %>
																                       </s:if>
																                    </s:iterator>
																                    
																                    <option value="<s:property value='marketId' />" <% if(marketFlag==true){ %>selected="selected"<% } %>>
																                    	<s:property value="marketName" />
																                    </option>
																                    
						                                                	     </s:iterator>
										                                    </select>    				
									                                    </div>		
					                                               </div>
                                            			        </div>
                                        			        </div>	
                                        			        <div class="form-row row-fluid">
					                                            <div class="span12">
					                                                <div class="row-fluid">
					                                                    <label class="form-label span3" for="role.roleName">Make<font style="color:red">*</font></label>
					                                                    <div class="form-label span9" style="text-align: left;">
						                                                	<select  name="selectedMakes" class="nostyle" multiple="multiple" >
						                                                	     <s:iterator value="makeList" id="makeLst" >
						                                                	      
						                                                	      <% boolean makeFlag=false; %>
						                                                	        <s:iterator value="#userLst.responsibilityList" id="resLst">
																                       <s:if test="#resLst.makeId == #makeLst.makeId"> 
																                          <% makeFlag=true; %>
																                       </s:if>
																                    </s:iterator>
																                    
																                    <option value="<s:property value='makeId' />" <% if(makeFlag==true){ %>selected="selected"<% } %>>
																                    	<s:property value="makeName" />
																                    </option>
																                    
						                                                	     </s:iterator>
										                                    </select>    				
									                                    </div>	    						
					                                               </div>
                                            			        </div>
                                        			        </div>									
												             <input type="hidden" name="user.userId" value="<s:property value='userId' />" />
												             <input type="hidden" name="user.userTypeId" value="<s:property value='userTypeId' />" />                              
												     </div>
												     <div class="modal-footer">
												       <a href="#" class="btn" data-dismiss="modal">No</a>
												       <a href="#" class="btn btn-primary" onclick="editRole(<s:property value='#indx.count'/>)">Yes</a>
												     </div>
												</div>
											    </form>
												<!-- Edit Confirmation Modal -->
																							 
							                    </td>
							                </tr>
							            </s:iterator>
										
				
                                        </tbody>
                                        
                                    </table>
                                    
                                  
                                </div>

                            </div><!-- End .box -->

                        </div><!-- End .span12 -->

                    </div><!-- End .row-fluid -->

                <!-- End page Content: -->
                
            </div>
            <!-- End contentwrapper -->
        </div><!-- End #content -->


    </div><!-- End #wrapper -->
    
 
  

<%@ include file="template/CommonJS.jsp" %>    

 <script type="text/javascript" src="/FMTOOL_WEB/resources/plugins/tables/dataTables/jquery.dataTables.min.js"></script>
 <script type="text/javascript" src="/FMTOOL_WEB/resources/plugins/tables/responsive-tables/responsive-tables.js"></script><!-- Make tables responsive -->
 <script type="text/javascript" src="/FMTOOL_WEB/resources/js/datatable.js"></script><!-- Init plugins only for page -->
 <script type="text/javascript">
  function editRole(formSerial)
  {
   document.getElementById("editForm"+formSerial).submit();
  }
 </script>
    
		 
<%@ include file="template/CommonFooter.jsp" %>    

